<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1100px" append-to-body>

        <el-table v-loading="loading" :data="advertisingsTotal" border script>
            <el-table-column label="广告平台" prop="advplatform_name" min-width=""></el-table-column>
            <el-table-column label="总计金额" prop="spend" min-width=""></el-table-column>
        </el-table>

        <el-table v-loading="loading" :summary-method="getSummaries" show-summary :data="tableData" border script>
            <el-table-column label="广告平台" prop="advplatform_name" min-width="80"></el-table-column>
            <el-table-column label="广告ID" prop="advertiser_id" min-width="120"></el-table-column>
            <el-table-column label="广告名称" prop="info" min-width="120"></el-table-column>
            <el-table-column label="运营" prop="nickname" min-width="60"></el-table-column>
            <el-table-column label="金额" prop="spend" min-width="60" sortable></el-table-column>
            <el-table-column label="ROI" prop="roas" min-width="60" sortable></el-table-column>
            <el-table-column label="cpm" prop="cpm" min-width="60" sortable></el-table-column>
            <el-table-column label="cpc" prop="cpc" min-width="60" sortable></el-table-column>
            <el-table-column label="更新时间" prop="createtime" min-width="" sortable></el-table-column>
        </el-table>

    </el-dialog>
</template>

<script>
import { queryOrderReportDailyInfo } from '@/api/report'

export default {
    name: 'OrderReportDailyInfo',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            loading: false,
            save: false,
            tableData: [],
            advertisingsTotal: [],
        }
    },
    computed: {
        title() {
            return `每日业绩报表详情明细`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        //表尾合计行
        getSummaries(param) {
            const { columns, data } = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '统计'
                    return
                }
                const values = data.map(item => Number(item[column.property]))
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr)
                        if (!isNaN(value)) {
                            return prev + curr
                        } else {
                            return prev
                        }
                    }, 0)
                    if (index === 5  || index === 1) {
                        sums[index] = ""
                    }else if(index === 7  || index === 6 ){
                        sums[index] = (sums[index] / this.tableData.length).toFixed(2)
                    }else {
                        sums[index] = sums[index].toFixed(2)
                    }
                } else {
                    sums[index] = ''
                }
            })
            return sums
        },
        getDetail() {
            this.loading = true
            const params = { 
                shop_id: this.params.shop_id,
                customDate: this.params.customDate,
                date: this.params.date
             }
            queryOrderReportDailyInfo(params)
                .then(res => {
                    this.tableData = res.data.advertisings
                    this.advertisingsTotal = res.data.advertisingsTotal

                })
                .finally(() => {
                    this.loading = false
                })
        },
    },
}
</script>

<style>

</style>
